<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <a-form-item label="商家名称">
          <a-input allowClear :maxLength="18" autocomplete="off" placeholder="请输入商家名称" v-decorator="['name']" />
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input allowClear :maxLength="11" autocomplete="off" placeholder="请输入手机号" v-decorator="['phone']" />
        </a-form-item>
        <sjht-search-submit hide-reset />
      </a-form>

      <template slot="action" slot-scope="t, r">
        <a v-if="[0, 2].includes(r.verify)" @click.stop="onChangeVerify(r.id, 1)">通过</a>&nbsp;
        <a v-if="[0, 1].includes(r.verify)" @click.stop="onChangeVerify(r.id, 2)">不通过</a>
      </template>
      <template slot="status" slot-scope="status, record">
        <a-switch :defaultChecked="Boolean(status)" checkedChildren="启用" unCheckedChildren="停用" @change="onChange(record.id, $event, 'state')" />
      </template>
      <a-tooltip slot="tip" slot-scope="text" placement="topLeft" class="sjht-cursor" v-if="text" :title="text">{{ text }}</a-tooltip>
    </a-table>
  </a-card>
</template>
<script>
import { table, tableAction, searchForm } from '../../utils/mixins'
import { PageList, ChangeVerify, ChangeStatus } from '../../api/store'
// import SjhtState from '../../components/state'

export default {
  name: 'StoreList',
  mixins: [table, tableAction, searchForm],
  // components: {
  //   [SjhtState.name]: SjhtState
  // },
  data() {
    return {
      loadApi: PageList,
      updateApi: ChangeStatus
    }
  },
  created() {
    this.columns.unshift({ title: '认证', key: 'operation', width: 100, align: 'center', fixed: true, scopedSlots: { customRender: 'action' } })
    this.columns.push(
      { title: 'ID', dataIndex: 'id', width: 60 },
      { title: '商家名称', dataIndex: 'name', width: 150, ellipsis: true, scopedSlots: { customRender: 'tip' } },
      { title: '负责人', dataIndex: 'leader', width: 100 },
      { title: '手机号码', dataIndex: 'phone', width: 100 },
      { title: '商家地址', dataIndex: 'address', width: 150, ellipsis: true, scopedSlots: { customRender: 'tip' } },
      { title: '认证状态', dataIndex: 'verify', width: 95, align: 'center', customRender: t => (t == 0 ? '未审核' : t == 1 ? '通过' : t == 2 ? '不通过' : '未知') },
      { title: '状态', dataIndex: 'status', width: 100, align: 'center', scopedSlots: { customRender: 'status' } },
      { title: '备注', dataIndex: 'remarks', width: 200, ellipsis: true, scopedSlots: { customRender: 'tip' } },
      { title: '创建时间', dataIndex: 'createTime', width: 145 },
      { title: '更新时间', dataIndex: 'updateTime', width: 145 }
    )
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onChangeVerify(id, verify) {
      this.loading = true
      const { dataSource, $message } = this
      ChangeVerify(id, verify)
        .then(res => {
          if (res) {
            const index = dataSource.findIndex(x => x.id === id)
            if (index > -1) {
              const record = dataSource[index]
              Object.assign(record, { verify })
              dataSource.splice(index, 1, record)
            }
            $message.success('修改成功')
          } else $message.error('修改失败')
        })
        .catch(err => {
          $message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>